<template>
    <div>
     <div class="caidanming"><strong>诊所管理 /</strong>诊所信息</div>  
      <div class="title">诊所信息</div>
        <!-- 我是诊所信息页面 -->
      <div>
        <el-button type="primary" size="mini" @click="clinicOpen">
              <i class="el-icon-plus"></i>
              创建诊所
        </el-button>
      </div> 
      <!-- 主体表格部分 -->
      <div style="margin-top:20px">
          <el-row>
                <!-- 主体表格部分 -->
                <template>
                    <el-table
                    :data="roleTable"
                    border
                    fit
                    style="width: 100%;text-align:center"
                    >
                     <el-table-column align="center"
                        type="selection"
                        width="40">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="name"
                        label="序号" 
                        type="index"
                        width="70">
                        
                    </el-table-column>
                    <el-table-column align="center"
                        prop="community_hospitals_number"
                        label="诊所编号"
                        width="164">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="community_hospitals_name"
                        label="诊所名称"
                        width="163">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="community_hospitals_principal"
                        label="负责人">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="community_hospitals_map"
                        label="诊所地址"
                        width="204">
                    </el-table-column>

                   
                    
                    <el-table-column align="center"
                        prop="community_hospitals_state"
                        label="状态">
                        <!-- template slot-scope="scope" scope.row这三个属性可以获取当前表格的一整行数据-->
                        <template slot-scope="scope" >
                            <!-- {{scope.row.admin_state===0?'启用':'停用'}} -->
                            <span v-if="scope.row.community_hospitals_state===1" style="color:red;font-weight: 500;
        font-size: 14px;">停用</span>
                            <span v-if="scope.row.community_hospitals_state===0" style="color:green;font-weight: 500;
        font-size: 14px;">启用</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"
                        prop="address"
                        label="操作"
                        width='400'>
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handle(scope.$index, scope.row,0)">编辑</el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="deleteClinic(scope.row.community_hospitals_id)">删除
                            </el-button>
                             
                            <el-button size="mini" @click="stateClick(scope.row)" type="warning">
                                {{scope.row.community_hospitals_state===0?'停用':'启用'}}
                            </el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="findDetails(scope.row.community_hospitals_id)">查看详情
                            </el-button>
                            
                            
                        </template>
                    </el-table-column>
                    </el-table>
                </template>
            </el-row>
      </div>

            <!-- 创建诊所卡片框 -->
             <!-- 添加用户模态框 -->
            <div>
                <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="60%">
                    <el-form :model="addRoleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm" label-suffix=":">
                        
                        <el-form-item label="诊所名称" prop="name">
                            <el-input  v-model="addRoleForm.community_hospitals_name"></el-input>
                        </el-form-item>
                         <el-form-item label="负责人" prop="name">
                            <el-input  v-model="addRoleForm.community_hospitals_principal"></el-input>
                        </el-form-item>
                         <el-form-item label="联系电话" prop="name">
                            <el-input  v-model="addRoleForm.community_hospitals_phone"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="诊所地址" prop="name">
                            <el-input  v-model="addRoleForm.community_hospitals_map"></el-input>
                        </el-form-item>
                        <el-form-item label="所属区域" prop="name">
                                <template>
                                        <el-select v-model="addRoleForm.area_code" >
                                            <el-option
                                            v-for="item in regin"
                                            :key="item.region_id"
                                            :label="item.region_name"
                                            :value="item.region_id">

                                            </el-option>
                                        </el-select>
                                    </template>
                        </el-form-item>
                         <el-form-item label="备案号" prop="name">
                             <el-upload
                                class="upload-demo"
                                action="G:/image"
                                v-model="addRoleForm.community_hospitals_records"
                                multiple
                                :limit="3"
                                
                                :file-list="fileList">
                                <el-button size="small" type="primary" >上传备案证明</el-button>
                                <span slot="tip" class="el-upload__tip" style="color:red;margin-left:20px">只能上传jpg/png文件，且不超过500kb</span>
                            </el-upload> 
                        </el-form-item>
                        <el-form-item label="资质证明" prop="name">
                             <el-upload
                                class="upload-demo"
                                action="G:/image"
                                
                                multiple
                                :limit="3"
                                
                                :file-list="fileList">
                                <el-button size="small" type="primary" >上传资质证明</el-button>
                                <span slot="tip" class="el-upload__tip" style="color:red;margin-left:20px">只能上传jpg/png文件，且不超过500kb</span>
                            </el-upload> 
                        </el-form-item>
                     
                         
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible=false">取 消</el-button>
                            <el-button type="primary" @click="insertClinic">确 定</el-button>
                        </span>
                </el-dialog>

            </div>
            <!-- 查看详情框 -->
            <div>
                <el-dialog
                    title="提示"
                    :visible.sync="findCilnicDialog"
                    width="60%">
                    <el-form :model="findClinicBox"  ref="ruleForm" label-width="100px" class="demo-ruleForm" label-suffix=":">
                        <el-form-item label="诊所编号" prop="community_hospitals_number">
                            <el-input v-model="findClinicBox.community_hospitals_number"></el-input>
                        </el-form-item>
                        <el-form-item label="诊所名称" prop="community_hospitals_name">
                            <el-input  v-model="findClinicBox.community_hospitals_name"></el-input>
                        </el-form-item>
                         <el-form-item label="负责人" prop="community_hospitals_principal">
                            <el-input  v-model="findClinicBox.community_hospitals_principal"></el-input>
                        </el-form-item>
                         <el-form-item label="联系电话" prop="name">
                            <el-input  v-model="findClinicBox.community_hospitals_phone"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="诊所地址" prop="name">
                            <el-input  v-model="findClinicBox.community_hospitals_map"></el-input>
                        </el-form-item>
                        <el-form-item label="所属区域" prop="name">
                                <template>
                                        <el-select v-model="findClinicBox.area_code" disabled>
                                            <el-option
                                            v-for="item in regin"
                                            :key="item.region_id"
                                            :label="item.region_name"
                                            :value="item.region_id">

                                            </el-option>
                                        </el-select>
                                    </template>
                        </el-form-item>
                          <el-form-item label="备案号" prop="name" >
                            <el-input  v-model="findClinicBox.community_hospitals_records" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="资质证明" prop="name">
                             <div class="demo-image">
                                <div class="block" v-for="fit in fits" :key="fit">
                                    <span class="demonstration"></span>
                                    <el-image
                                    style="width: 100px; height: 100px"
                                    :src="url"
                                    :fit="fit"></el-image>
                                </div>
                             </div>
                        </el-form-item>
                     
                         
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="insertClinic2">确 定</el-button>
                        </span>
                </el-dialog>

            </div>

            </div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
    return{
        addRoleForm:{
            community_hospitals_number:'',
            community_hospitals_name:'',
            community_hospitals_principal:'',
            community_hospitals_phone:'',
            community_hospitals_map:'',
            area_code:'',
            community_hospitals_records:''
        },
        findClinicBox:{
                community_hospitals_number:'',
                community_hospitals_name:'',
                community_hospitals_principal:'',
                community_hospitals_phone:'',
                community_hospitals_map:'',
                area_code:'',
                community_hospitals_records:''
        },
        findCilnicDialog:false,
        visibleCancel:'',
        roleTable:[],
        dialogVisible:false,
        roles:[],
        regin:[],
        street:[],
        fileList:[],
        clinicAddress:'',
        fits: ['fill'],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
  },
  methods:{
    // 用户信息全局
      findClinicAdmin(){
           var userInfo=JSON.parse(sessionStorage.getItem("userInfo"));
            // 获取所有诊所用户信息
        axios.get("http://localhost/Comm/findClinicByCode?role_id="+userInfo.role_id+"&area_code="+userInfo.area_code)
        .then((r)=>{
            if(r.data.code===200){
                this.roleTable=r.data.data}
            else{
                this.roleTable=[];
            }
        });
      },
        //确定按钮触发事件
    insertAdmin(){
        console.log(this.addRoleForm);
        axios.post("http://localhost/city_admin/insertAdmin",this.addRoleForm)
        .then(r=>{
        
            if(r.data.code===200){
                this.dialogVisible=false;
                 this.$message({
                message: '添加成功',
                type: 'success'
                });
                this.addRoleForm={};
            }
        });
    
    },
    clinicOpen(){
      this.dialogVisible=true;
    },
    //  区县触发事件
    reginById(reginId){
        axios.get("http://localhost/RegionController/"+reginId)
        .then((r)=>{
           this.addRoleForm.area_name=r.data.data[0].region_name;
           
           this.street=r.data.data;
        })
        this.countiesId=reginId;
    }
    ,
    bindingClinic(score){
        console.log(score);
    },
    // 查看详情触发事件
    findDetails(community_hospitals_id){
        this.findCilnicDialog=true;
        axios.get("http://localhost/Comm/findClinicById?communityHospitalsId="+community_hospitals_id)
        .then(r=>{
            console.log(r);
            this.findClinicBox=r.data.data
        })
        
    },
    //创建诊所确定按钮
    insertClinic(){
        axios.post("http://localhost/Comm/addCommunity",this.addRoleForm)
        .then(r=>{
            if(r.data.code===200){
                this.$message({
                message: '创建成功',
                type: 'success'
                });
                this.dialogVisible=false;
                this.findClinicAdmin();
            }else{
                this.$message.error('很抱歉，创建失败，请重试');
            }
        })
    },
    //查看详情确定按钮
    insertClinic2(){
        this.findCilnicDialog=false;
    
    },
    // 删除按钮触发事件
    deleteClinic(community_hospitals_id){
        axios.get("http://localhost/Comm/deleteCommunity?community_id="+community_hospitals_id)
        .then(r=>{
            if(r.data.code===200){
                this.$message({
                message: '删除成功',
                type: 'success'
                });
                this.dialogVisible=false;
                this.findClinicAdmin();
            }else{
                this.$message.error('很抱歉，删除失败，请重试');
            }
        })
    },
    //停用启用按钮
    stateClick(scope){
        console.log(scope);
        axios.get("http://localhost/Comm/updateState?communityHospitalsId="+scope.community_hospitals_id+
        "&communityHospitalsState="+scope.community_hospitals_state,
        )
        .then(r=>{
            if(r.data.code===200){
                this.$message({
                message: '删除成功',
                type: 'success'
                });
                this.dialogVisible=false;
                this.findClinicAdmin();
            }else{
                this.$message.error('很抱歉，删除失败，请重试');
            }
        })
    }
    
  },
  mounted(){
        var userInfo=JSON.parse(sessionStorage.getItem("userInfo"));
        
     // 获取所有角色
        axios.get("http://localhost/Role/countyRole")
        .then((r)=>{
           
            this.roles=r.data.data;
        });
        // 获取地区
        axios.get("http://localhost/RegionController/findCounty?area_code="+userInfo.area_code)
        .then((r)=>{
            this.regin=r.data.data;
        });
        // 获取所有诊所用户信息
        axios.get("http://localhost/Comm/findClinicByCode?role_id="+userInfo.role_id+"&area_code="+userInfo.area_code)
        .then((r)=>{
            console.log(r);
            
            if(r.data.code===200){
            this.roleTable=r.data.data}
            else{
                this.roleTable=[];
            }
        });
        
  }
}
</script>
<style scoped>
/* 外边距的顺序: 上 左 下 右 */
.caidanming {
  margin: 10px 0px 10px 10px;
}
.title {
  font-size: 30px;
  margin-top: 20px;
  font-weight: bold;
  margin: 20px 50px 25px 10px;
}

</style>
